<template>
  <div>
    <!-- 弹窗 -->
    <el-dialog v-model="store.openAddCorrect" :show-close="false" append-to-body class="dialogClass" width="40%" draggable>
      <!-- 弹窗标题 -->
      <template #header="{ close, titleId }">
        <div class="dialogHeader">
          <span :id="titleId" class="dlgTitleClass">添加考试阅卷信息</span>
          <el-icon class="closeIcon" @click="closeDialog">
            <CloseBold />
          </el-icon>
        </div>
      </template>

      <!-- 弹窗内容 -->
      <template #default>
        <el-form class="exam-form" ref="addExamFormRef" :rules="rules" :model="examData" label-width="120px">
          <el-form-item label="开始阅卷时间" prop="correctTime">
            <el-date-picker
                v-model="examData.correctTime"
                type="datetime"
                placeholder="请选择客观题阅卷时间"
                :disabled-date="disablePastDate"
                :disabled-time="disablePastTime"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                class="uniformWidth"
            />
          </el-form-item>
          <!-- 主观题阅卷时间 -->
          <el-form-item label="结束阅卷试卷" prop="correctEndTime">
            <el-date-picker
                v-model="examData.correctEndTime"
                type="datetime"
                placeholder="请选择主观题阅卷时间"
                :disabled-date="disablePastDate"
                :disabled-time="disablePastTime"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                class="uniformWidth"
            />
          </el-form-item>



          <!-- 阅卷人 -->
          <el-form-item label="阅卷人" prop="markers">
            <el-select
                v-model="examData.markers"
                multiple
                filterable
                placeholder="请选择阅卷人"
                class="uniformWidth"
            >
              <el-option
                  v-for="marker in markerOptions"
                  :key="marker.value"
                  :label="marker.label"
                  :value="marker.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </template>

      <!-- 弹窗底部 -->
      <template #footer>
        <div class="dialogFooter">
          <el-button class="el-button__plain" @click="closeDialog" >取 消</el-button>
          <el-button type="primary" class="el-button__primary" @click="submitExamInfo">确 认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted} from 'vue';
import dayjs from 'dayjs';

import { saveCorrectInfo} from "@/api/question/exam.js";
import {ElMessage, ElMessageBox} from "element-plus";
import {CloseBold} from "@element-plus/icons-vue";
import {getTeachers} from "@/api/user/index.js";
import {examBaseStore} from "@/stores/question/examStore.js";
const addExamFormRef=ref()
// 弹窗显示状态
const store=examBaseStore()

// 表单数据
const examData = reactive({
  correctEndTime: '', // 主观题阅卷时间
  correctTime: '', // 客观题阅卷时间
  markers: [], // 阅卷人
});

// 阅卷人选项
const markerOptions = ref([
  { value: 'marker1', label: '阅卷人1' },
  { value: 'marker2', label: '阅卷人2' },
  { value: 'marker3', label: '阅卷人3' },
]);

onMounted(()=>{
  initMarkerOptions()
})
const initMarkerOptions=async () => {
  const res = await getTeachers()
  markerOptions.value=res.data
}
// 表单校验规则
const rules = reactive({
  correctEndTime: [
    { required: true, message: '请选择结束阅卷时间', trigger: 'change' },
    {
      validator: (rule, value, callback) => {
        if (value && examData.correctTime && dayjs(value).isBefore(examData.correctTime)) {
          callback(new Error('结束阅卷时间必须在开始阅卷时间之后'));
        } else {
          callback();
        }
      },
      trigger: 'change',
    },
  ],
  correctTime: [
    { required: true, message: '请选择开始阅卷时间', trigger: 'change' },
    {
      validator: (rule, value, callback) => {
        if (value && examData.correctEndTime && dayjs(value).isAfter(examData.correctEndTime)) {
          callback(new Error('开始阅卷时间不能晚于结束阅卷时间'));
        } else {
          callback();
        }
      },
      trigger: 'change',
    },
  ],
  markers: [{ type: 'array', required: true, message: '请至少选择一个阅卷人', trigger: 'change' }],
});

// 禁用过去的日期
const disablePastDate = (date) => {
  return date < dayjs().startOf('day').toDate();
};

// 禁用过去的时刻
const disablePastTime = (time) => {
  const now = dayjs();
  return time < now.toDate();
};

// 关闭弹窗
const closeDialog = () => {
  store.setOpenAddCorrect(false)
  store.setExamBaseId(0)
  Object.assign(examData, { correctTime: '', correctEndTime: '', markers: [] });
};

// 提交表单
const submitExamInfo = async () => {
  const valid= await addExamFormRef.value.validate()
  if(!valid) {
    ElMessage.warning("请完善阅卷信息")
    return
  }
  ElMessageBox.confirm('添加阅卷信息后不可更改', '确认添加', {
    app: undefined, components: undefined, config: undefined, directives: undefined, mixins: [], provides: undefined,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const data={id:store.examBaseId,correctTime:examData.correctTime,correctEndTime:examData.correctEndTime,correctUserIdList:examData.markers}
    const res=await saveCorrectInfo(data)
    ElMessage.success("添加成功")
    closeDialog();
  })

};
</script>

<style scoped>
/* 弹窗头部样式 */
.dialogHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
}

.dlgTitleClass {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.closeIcon {
  font-size: 20px;
  cursor: pointer;
  color: #909399;
  transition: color 0.3s ease;
}

/* 输入框和选择器的统一宽度 */
.uniformWidth {
  width: 500px;
  box-sizing: border-box;
  border-radius: 4px;
}

/* 弹窗主体样式 */
.exam-form {
  padding: 20px;
}

/* 弹窗底部样式 */
.dialogFooter {
  display: flex;
  justify-content: flex-end;
  padding: 16px 20px;
}
.el-input ,.el-select{
  width: 500px;
}

</style>